<!--
 * @Description: 多系统时，下拉选择切换系统
 * @Author: DHL
 * @Date: 2021-12-10 15:46:51
 * @LastEditors: DHL
 * @LastEditTime: 2022-07-19 09:09:07
-->

<template>
  <div class="multisystem-container">
    <el-popover
      placement="bottom-start"
      trigger="hover"
      :width="200"
      :offset="-3"
      popper-class="multisystem_popover"
      @beforeEnter="handleShow"
      @hide="handleHide"
    >
      <template #reference>
        <div class="multisystem_title" :class="show ? 'multisystem-hover' : ''">
          欢迎使用：{{ loginUserStore.appName }}
          <svg-icon :iconClass="show ? 'up' : 'down'"></svg-icon>
        </div>
      </template>

      <template #default>
        <div class="multisystem_popover-title">
          认证通过系统：
          <el-tag type="danger" effect="dark">
            {{ loginUserStore.appNum }}
          </el-tag>
        </div>
        <el-divider />
        <div class="multisystem_popover-list">
          <div
            class="multisystem_popover-item"
            v-for="item in loginUserStore.appList"
            :key="item.id"
            @click="handleClickApp(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { LoginUserAppModel } from '@/api/common/model/loginModel'
  import { useLoginUserStore } from '@/store/modules/loginUser'

  const loginUserStore = useLoginUserStore()

  const show = ref(false)

  /**
   * 显示
   */
  function handleShow() {
    show.value = true
  }

  /**
   * 隐藏
   */
  function handleHide() {
    show.value = false
  }

  /**
   * 切换系统
   */
  function handleClickApp(app: LoginUserAppModel) {
    if (app.appId === loginUserStore.appId) {
      return
    }

    loginUserStore.switchAppAction(app)
  }
</script>

<style scoped lang="scss">
  .multisystem-container {
    padding: 0px 10px;
    cursor: pointer;
    .multisystem_title {
      font-size: 14px;
      color: #909399;

      &.multisystem-hover {
        color: #606266;
      }
    }
  }
</style>

<style lang="scss">
  .multisystem_popover {
    cursor: pointer;

    .el-divider {
      margin: 10px 0px 0px 0px;
    }

    .multisystem_popover-title {
      font-size: 14px;
    }

    .multisystem_popover-list {
      font-size: 14px;

      .multisystem_popover-item {
        padding: 8px 0px;
        color: #909399;

        &:hover {
          color: #606266;
        }
      }
    }
  }
</style>
